<template>
  <div id="list">
    <el-row>
      <el-col :span="24">
        <div class="div_title">{{ $t(type) }}</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div v-if="true" class="search-box">
          <el-form inline>
            <el-form-item v-for="(item, index) in searchKey" :key="index" :label="$t(item.lable)"
                          :prop="item.fieldname">
              <el-input v-if="item.type === 'input'" v-model="item.value" size="mini"></el-input>
              <el-select v-if="item.type === 'select'" v-model="item.value" size="mini">
                <el-option v-for="optionitem in item.data" :key="optionitem.ID" :label="optionitem.name"
                           :value="optionitem.ID"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSearch" icon="search" size="mini">{{ $t('Search') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="list-box">
          <div class="toolbar-box">
            <el-button-group>
              <el-button v-for="(toolbar,index) in toolbarList" :key="index" :type="toolbar.type" :icon="toolbar.icon"
                         @click="getButtonType(toolbar.event)">{{ $t(toolbar.msg) }}
              </el-button>
            </el-button-group>
          </div>
          <el-table :data="listData" border highlight-current-row fit @row-dblclick="openDialog" @row-click="clickRow"
                    @current-change="handleTableChange">
            <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
            <el-table-column v-for="(item ,index) in tableHead" :key="index" v-if="item.show" :prop="item.fieldname"
                             :label="$t(item.lable)" :formatter="tableFormatter" align="center"></el-table-column>
          </el-table>
          <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                         :page-size="pageSize"></el-pagination>
          <el-dialog :title="$t(type)" v-model="isDialog" size="tiny">
            <div class="dialog-content">
              <dialogcontent :currentID="currentID" :type="type" @stateChange="getDialogState"></dialogcontent>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import dialogcontent from '@/components/common/DialogContent'
  import {
    getTableHeadData,
    tableCommonFormatter,
    getToolBarList,
    getObjectDataFromArray,
    getComboBoxMap
  } from '../../assets/js/buildStructure/list.js'
  import { postDataToServer } from '../../assets/js/post.js'
  import { getPosServertMapKey, commonNotify } from '../../assets/js/common.js'

  export default {
    name: 'list',
    created: function () {
      this.type = this.$route.params.type //捕获由路由传递过来的type值
      this.getTableData(1)
      this.getTableHead()
      this.getSearchKey()
      this.getAuthority()//取得权限
      this.getToolBars()
    },
    data () {
      return {
        type: '',		//保存页面类型
        listData: [],	//当前页面的数据
        currData: {},	//选中行的数据
        currentID: '',//选中行的id
        tableHead: [],	//表格的表头
        searchKey: [],	//查询需要的字段
        total: 0, 		//获取所有数据的条数
        currentPage: 1, //当前页码
        isDialog: false,//是否显示dialog
        toolbarList: [],	 //权限列表
        authority: 0, //用户权限等级
        pageSize: 0,
      }
    },
    mounted: function () {
      let _this = this
      this.searchKey.forEach(function (val, index, array) {
        if (val.type === 'select') {
          var m = new Array()
          let fieldmap = getComboBoxMap(val.fieldname)
          let field = val.fieldname
          postDataToServer(fieldmap.datasource)
            .then((data) => {
              let list = data.data_list
              list.forEach(function (value, index) {
                let s = new Object()
                s.ID = value[fieldmap.valueField]
                s.name = value[fieldmap.textField]
                m.push(s)
              })
            })
          val.data = m
        }
      })
    },
    methods: {
      //取得用户权限接口
      getAuthority () {
        if (this.type == '') {
          this.authority = 7
        }
        else {
          this.authority = 15
        }

      },
      //取得功能按钮
      getToolBars () {
        this.toolbarList = getToolBarList('list', this.authority)
      },
      //根据页数获取表格数据
      getTableData (pageNum, searchdata = []) {
        let _this = this
        let param = new Array()
        let listKey = getPosServertMapKey(this.type, 'LIST')
        let obj = new Object()
        obj.page_no = pageNum
        obj.page_size = 15
        if (searchdata.length != 0) {
          for (let i = 0; i < searchdata.length; i++) {
            obj.id = searchdata[i].value
          }

        }
        postDataToServer(listKey, obj)
          .then(function (data) {
            //commonNotify(_this,data.status,'GET');
            _this.listData = data.data_list
            _this.total = data.total_results
            _this.pageSize = data.page_size
            _this.currentPage = data.page_no
          }).catch((data) => {
          commonNotify(_this, -1, 'GET')
        })
      },
      //获取当前页面的表头信息
      getTableHead () {

        this.tableHead = getTableHeadData(this.type, 'tableHeadKey')
      },
      //获取查询条件
      getSearchKey () {
        this.searchKey = getTableHeadData(this.type, 'searchKey')
      },
      //改变当前页数时触发
      handleCurrentChange (pageNum) {
        this.currentPage = pageNum
      },
      //接受子组件的状态关闭子组件
      getDialogState (state) {
        this.currData = {}
        this.isDialog = false
        if (state !== -1) {
          this.getTableData(this.currentPage)
        }
      },
      //双击打开dialog
      openDialog (row, event) {
        this.currData = row
        this.currentID = row.id
        this.isDialog = true
      },
      //单击某行触发
      clickRow (row, event, column) {
        this.currData = row
      },
      //编辑按钮
      edit (row) {
        if (row.id === '' || row.id === undefined) {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        } else {
          this.openDialog(row, '')
        }
      },
      //
      delete (row) {
        if (row.id === '' || row.id === undefined) {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
          return
        }
        let _this = this
        let deleKey = getPosServertMapKey(this.type, 'DEL')
        let pargram = new Object()
        pargram.id = row.id
        postDataToServer(deleKey, pargram).then((data) => {
          commonNotify(_this, data.status, 'DEL')
          if (data.status === 0) {
            _this.getTableData(_this.currentPage)
          }
        }).catch((error) => {
          commonNotify(_this, -1, 'DEL')
        })
      },
      //取得选中的行数据
      handleTableChange (currentRow, oldCurrentRow) {
        this.currData = currentRow
      },
      //根据不同的按钮执行不同的操作
      getButtonType (type) {
        let _this = this
        switch (type) {
          case 'add':
            _this.openDialog({}, '')
            break
          case 'edit':
            _this.edit(_this.currData)
            break
          case 'delete':
            _this.delete(_this.currData)
          default:
            // statements_def
            break
        }
      },
      tableFormatter (row, column) {
        return tableCommonFormatter(row, column)
      },
      //查询数据
      doSearch () {
        let searchData = getObjectDataFromArray(this.searchKey, 'fieldname', 'value')
        let data = new Array()
        data[0] = new Object()
        data[0].id = 'id'
        let s
        for (s in searchData) {
          data[0].value = searchData[s]
        }
        this.getTableData(1, data)

      },
      updateComponent () {
        this.type = this.$route.params.type //捕获由路由传递过来的type值
        this.getTableData(1)
        this.getTableHead()
        this.getSearchKey()
        this.getAuthority()//取得权限
        this.getToolBars()
      }
    },
    watch: {
      //监控页码的改变
      currentPage: function (val, oldVal) {
        this.getTableData(val)
      },
      '$route': function (val, oldVal) {
        this.updateComponent()
      }
    },
    components: {
      dialogcontent
    }
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  #list {
    padding: 10px 20px 0 20px;
  }

  .div_title {
    padding: 0 0 0 1em;
    height: 2.5em;
    background-color: #58B7FF;
    color: #F9FAFC;
    line-height: 2.5em;
  }

  .search-box {
    border-bottom: 1px solid #99A9BF;
    padding: 10px 0 0 10px;
  }

  /*弹出框样式*/
  .dialog-content {
    border: 1px solid #E5E9F2;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
  }

  .el-dialog {
    background-color: black;
  }
</style>
